const { default: styled } = require("styled-components");

const ListItem = styled.div`
  flex-shrink: 0;
  width: ${(props) => props.itemWidth || 25}%;
  padding: 8px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  .banner {
    position: relative;
    overflow: hidden;
    &:hover .left {
        color:white;

        /* background-color: rgba(0,0,0,0.3); */
        background-image: linear-gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,0));
      /* box-shadow: 3px 0px 50px 20px rgba(0,0,0,0.6); */
    }
    &:hover .right{

        color:white;

        background-image: linear-gradient(to left,rgba(0,0,0,0.3),rgba(0,0,0,0));
    }
    .left {
        color:transparent;
        transition: all 0.3s;
      z-index: 4;
      position: absolute;
      left: 0;
      width: 60px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
    }
    .right {
        color:transparent;

      transition: all 0.3s;
      z-index: 4;
      position: absolute;
      right: 0;
      width: 50px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &:hover{
    transition: all 0.3s;
    box-shadow: 0 -3px 10px 1px rgba(70,10,30,0.3);
    border-radius: 5px;
    transform: translateY(-10px);
}
&:hover img{
    transition: all 0.3s;
    transform: scale(1.5);
}
  .imgCover {
    overflow: hidden;
    width: 100%;
    height: 150px;
    position: relative;
    img {
      border-radius: 3px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .title {
    color: #3957a3;
    font-size: 12px;
    line-height: 2;
  }
  .roomName {
    color: #484848;
    font-weight: 600;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  }
  .rate {
    display: flex;
    align-items: center;
    font-size: 12px;
    .rate-msg {
      margin-left: 4px;
      margin-top: 1.5px;
    }
  }
  .smallFont {
    font-size: 12px;
  }
`;

export default ListItem;
